<template>
  <div
    v-loading="loading"
    :style="'height:' + height"
    style="position: relative"
  >
    <iframe
      ref="caseFormIframe"
      :src="src"
      frameborder="0"
      width="100%"
      :height="iframeHeight"
      scrolling="auto"
      id="caseFormIframe"
    />
    <div slot="footer" align="center" class="hideIframeBackground">
      <el-button @click="colseDialog">关闭</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "FormIframeView",
  props: ["outLink"],
  data() {
    return {
      src: this.outLink,
      reportOid: "",
      height: document.documentElement.clientHeight - 400 + "px;",
      iframeHeight: document.documentElement.clientHeight - 430 + "px;",
      loading: true,
    };
  },
  mounted: function () {
    setTimeout(() => {
      this.loading = false;
    }, 230);
    const that = this;
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 500 + "px;";
    };
  },
  methods: {
    colseDialog() {
      this.$emit("closeIframeView");
    },
  },
};
</script>
<style scoped>
iframe body {
  background-color: #fff;
}
.hideIframeBackground {
  width: 100%;
  height: 50px;
  background-color: #fff;
  position: absolute;
  bottom: 30px;
  left: 0;
}
</style>
